<template>
  <div class="root">
    我是Child组件
    <button @click="handleClick">click</button>
  </div>
</template>

<script>
import { getCurrentInstance, inject, provide } from 'vue';
export default {
  setup() {
    // 不知道你是否有过这样的困惑，就是很多时候因为习惯也好还是开发需要也好，你总想在setup中像VOA一样使用this，但是很明显setup里是不能直接this去调用当前组件实例的。但是开发者留了一个api给你，那就是getCurrentInstance，只需从vue中引入并直接调用即可拿到
    const _this = getCurrentInstance();
    console.log(_this);

    // inject的使用也很简单，直接从vue引入，然后调用的时候对应上字符串形式的父(祖宗)组件中定义的数据名字即可。比如这里App.vue中定义的数据名为data，这里就传入字符串data
    const data = inject('data');
    console.log(data);

    // 验证一下子组件拿到的data是不是和父组件同步的，如果这里的修改触发了App.vue中的watch，那就说明父子之间是同步修改的
    const handleClick = () => {
        data.age++;
    };

    return {
      handleClick,
    };
  },
};
</script>